<template>
	<view class="apply-refund" catchtouchmove="ture">
		<view class="refund-mask" @tap.stop="closerRefundFun" :animation="animationBg"></view>
		<view class="refund-content" :animation="animationData">
			<view class="header">
				<view @tap.stop="closerRefundFun">关闭</view>
				<text class="title">申请退款</text>
				<view>共<text class="red">{{orderDetail.goodsCount}}</text>件商品</view>
			</view>
			<view class="content">
				<view class="list">
					<block v-for="(item,index) in orderGoods" :key="item.id">
						<view class="item">
							<image class="checkbox" @tap="selectItem2(item,index)" v-if="item.refundState > 0" :src="imageUrl+'/tuanzhang/select1.png'" mode=""></image>
							<image class="checkbox" v-else  @tap="selectItem(item,index)" :src="item.check ? imageUrl+'/tuanzhang/select_in.png' : imageUrl+'/tuanzhang/select.png'" mode=""></image>
							<image class="good-photo" :src="item.logUrl.indexOf(',') != -1 ? item.logUrl.split(',')[0] : item.logUrl" mode=""></image>
							<view class="good-info">
								<view class="good-title">{{item.name}}</view>
								<view class="good-standard">
									{{item.spec}}<text class="goods-num" >*{{item.goodsNum}}</text>
								</view>
								<view class="good-price"><text class="goods-price-point">￥</text>
								<text>{{ filter.priceFormat(item.goodsRealFee / 100)}}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="cart-settlement">
					<view class="checked" @tap="allSelect">
						<image class="checkbox" :src=" flag ? imageUrl+'/youxuan/select_in.png' : imageUrl+'/youxuan/select.png'" mode=""></image>
						<text>全选</text>
					</view>
					<view class="total">
						<view class="number">{{selectNum}}件商品退款</view>
					</view>
					<view class="pay-btn" @tap="confirm">申请退款</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script module="filter" lang="wxs" src="../../filter/filter.wxs"></script>
<script>
	const orderApi= require('../../service/order.js');
	const app = getApp();
	
	export default {
		data() {
			return {
				imageUrl: app.globalData.imageUrl,
				animationData: {},
				animationBg: {},
				flag:false,
				selectGoodNum:0,
				selectNum:0,
			};
		},

		components: {},
		props: {
			orderDetail: {
				type: Object,
				default: {}
			},
			orderGoods:{
				type: Array,
				default:[]
			}
		},
		mounted: function () {
			var animation = wx.createAnimation({
				duration: 250,
				delay: 100,
				timingFunction: 'ease-in-out'
			});
			this.animation = animation;
			this.animation.bottom(0).step();

			this.animationData = this.animation.export()

			var animationBg = wx.createAnimation({
				duration: 250,
				delay: 100,
				timingFunction: 'ease-in-out'
			});
			this.animatBg = animationBg;
			this.animatBg.opacity(0.3).step();
			this.animationBg = this.animatBg.export();
		},
		methods: {
			// 取消按钮回调
			closerRefundFun: function () {
				this.animation.bottom('-500rpx').step();
				this.animationData = this.animation.export();
				this.animatBg.opacity(0).step();
				this.animationBg = this.animatBg.export();

				const _this = this;

				setTimeout(function () {
					_this.$emit("closerRefund");
				}, 400);
			},
			// 全选
			allSelect(){
				let that = this;
				this.selectNum = 0;
				let orderGoods = this.orderGoods;
				console.log(this.flag)
				console.log(this.orderGoods)
				if(orderGoods.length == 0){
					return;
				}
				this.flag = !this.flag;
				console.log(this.flag)
				if(this.flag){
					orderGoods.forEach(v=>{
						if(v.refundState < 1){
							that.$set(v,'check',true)
							that.selectNum += v.goodsNum;
						}
					})
				}else{
					orderGoods.forEach(v=>{
						that.$set(v,'check',false)
					})
					that.selectNum = 0;
				}
				this.orderGoods = orderGoods;
			},
			selectItem2(item){
				uni.showToast({
					title: item.name+'已申请过退款',
					icon:'none'
				})
				return;
			},
			// 点击选择/取消选择
			selectItem(item){
				for(let i=0;i<this.orderGoods.length;i++){
					if(this.orderGoods[i].id === item.id){
						this.orderGoods[i].check = !this.orderGoods[i].check;
						// 如果有条数据没选择,就取消全选
						if(this.orderGoods[i].check == false){
							this.flag = false;
							this.selectGoodNum -= 1; 
							 this.selectNum -= this.orderGoods[i].goodsNum;
						}else{
							this.selectGoodNum += 1;
							this.selectNum += this.orderGoods[i].goodsNum;
							// 全部选中
							if(this.selectGoodNum == this.orderGoods.length) {
								this.flag = true;
							}
						}
					}
				}
			},
			confirm(){
				let refundGoodData=[];
				let flag = true;
				this.orderGoods.forEach(v=>{        
					
					if(v.refundState < 1 ){
						flag = false;
					}
					if(v.check){
						refundGoodData.push(v)
					}
				})
				if(flag){
					uni.showToast({
					  title: '暂无可退款商品',
					  icon: 'none',
					  duration: 2000
					});
					return;
				}
				if(refundGoodData.length == 0){
					uni.showToast({
					  title: '至少选择一件商品',
					  icon: 'none',
					  duration: 2000
					});
					return;
				}
				this.closerRefundFun();
				
				const _this = this;
				
				setTimeout(function () {
					_this.$emit("confirmRefund", refundGoodData);
				}, 300);
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>